<template>
  <div>
    <h1>车辆管理</h1>
<!--    多条件查询开始-->
    <el-form inline="true" :model="queryForm">
      <el-form-item label="车牌号">
        <el-input v-model="queryForm.carid"></el-input>
      </el-form-item>
      <el-form-item label="车辆用途">
        <el-input v-model="queryForm.carzy"></el-input>
      </el-form-item>
      <el-form-item label="使用人">
        <el-input v-model="queryForm.ename"></el-input>
      </el-form-item>
      <el-form-item label="使用状态">
        <el-select v-model="queryForm.shiyongzhuangtaiid">
          <el-option v-for="(item,index) in zhuangtais" :label="item.zhuangtainame" :value="item.shiyongzhuangtaiid" key="index.shiyongzhuangtaiid"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="select()">查询</el-button>
        <el-button @click="addCar()">添加车辆</el-button>
      </el-form-item>
    </el-form>
    <!--    多条件查询结束-->

    <el-table :data="carList.slice((page-1)*pageSize,page*pageSize)" border style="width: 100%; margin-top: 20px"
              :header-cell-style="{
                  backgroundColor: 'deepskyblue',
                  color: 'white',
                  fontWeight: 'bolder',
                  textAlign:'center',
                  padding:'5px'
                }
                 "
    >
      <el-table-column label="车牌号" prop="carid" width="200px">
      </el-table-column>
      <el-table-column label="规格型号" prop="guige" width="200px">
      </el-table-column>
      <el-table-column label="车辆用途" prop="carzy" width="200px">
      </el-table-column>
      <el-table-column label="使用人" prop="ename" width="100px">
      </el-table-column>
      <el-table-column label="座位数" prop="zuoweishu" width="100px">
      </el-table-column>
      <el-table-column label="车辆状态" prop="shiyongzhuangtai.zhuangtainame" width="200px">
      </el-table-column>
      <el-table-column label="所属单位" prop="danweiname" width="200px">
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
        <el-button @click="updateCar(scope.row)">修改</el-button>
        <el-button @click="deleteByCarid(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页标签的开始-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      layout="total,sizes,prev,next,jumper">

    </el-pagination>
    <!--分页标签的结束-->

<!--    修改车辆开始-->
    <el-dialog title="修改车辆" :visible.sync="showAddCar2" width="50%" center top="0%">
      <el-form :inline="true">
        <el-form-item label="车牌号" style="width: 50%">
          <el-input v-model="updateShow.carid"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="updateShow.guige"></el-input>
        </el-form-item>
        <el-form-item label="座位数" style="width: 50%">
          <el-select v-model="updateShow.zuoweishu">
<!--            <el-option :value="updateShow.zuoweishu">请选择座位数</el-option>-->
            <el-option :value="2">2人坐</el-option>
            <el-option :value="5">5人坐</el-option>
            <el-option :value="7">7人坐</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买日期">
          <el-date-picker
            v-model="updateShow.goumairqi"
            type="date"
            placeholder="选择日期" style="width: 50%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原值(万元)" style="width: 50%">
          <el-select v-model="updateShow.money">
            <el-option :value="updateShow.money">请选择原值区间</el-option>
            <el-option :value="10">0-10万</el-option>
            <el-option :value="20">10-20万</el-option>
            <el-option :value="30">20-30万</el-option>
            <el-option :value="40">30-40万</el-option>
            <el-option :value="50">40-50万</el-option>
            <el-option :value="100">50-100万</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登记日期">
          <el-date-picker
            v-model="updateShow.dengjrqi"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车辆类型" style="width: 50%">
          <el-select v-model="updateShow.cartypeid">
            <el-option v-for="(item,index) in findCartype" :value="item.cartypeid" :label="item.cartypename" :key="index.cartypeid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select v-model="updateShow.shiyongzhuangtaiid">
            <el-option v-for="(item,index) in zhuangtais" :label="item.zhuangtainame" :value="item.shiyongzhuangtaiid" key="index.shiyongzhuangtaiid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产权所属部门" style="width: 50%">
          <el-select v-model="updateShow.deptno">
            <el-option v-for=" (item,index) in deptSelect"
                       :label="item.dname"
                       :value="item.deptno"
                       :key="index.deptname"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门车辆管理员">
          <el-input v-model="updateShow.bumenchaliangguanliyuan"></el-input>
        </el-form-item>
        <el-form-item label="使用汽油标号" style="width: 50%">
          <el-input v-model="updateShow.shiyongqiyoubiaohao"></el-input>
        </el-form-item>
        <el-form-item label="最近一次大修时间">
          <el-date-picker
            v-model="updateShow.zuihouyicidaxiutime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="安全保养负责人" style="width: 50%">
          <el-input v-model="updateShow.anquanbaoyangfuzeren"></el-input>
        </el-form-item>
        <el-form-item label="下次年审时间">
          <el-date-picker
            v-model="updateShow.xiacinianshentime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="本次年审时间" style="width: 50%">
          <el-date-picker
            v-model="updateShow.bencinianshentime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="功率">
          <el-input v-model="updateShow.kw"></el-input>
        </el-form-item>
        <el-form-item label="排量"  style="width: 50%">
          <el-input v-model="updateShow.pailiang"></el-input>
        </el-form-item>
        <el-form-item label="总质量">
          <el-input v-model="updateShow.kg"></el-input>
        </el-form-item>
        <el-form-item label="养路费缴纳情况"  style="width: 50%">
          <el-input v-model="updateShow.ylfjnqk"></el-input>
        </el-form-item>
        <el-form-item label="随车资料">
          <el-input v-model="updateShow.suicheziliao"></el-input>
        </el-form-item>
        <el-form-item label="备注"  style="width: 50%">
          <el-input v-model="updateShow.beizhu"></el-input>
        </el-form-item>
        <el-form-item label="填写人">
          <el-input v-model="updateShow.tianxeiren"></el-input>
        </el-form-item>
        <el-form-item label="填写时间"  style="width: 50%">
          <el-date-picker
            v-model="updateShow.tianxeitime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button id="xiugai" @click="saveUpdateCar()">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
<!--    修改车辆结束-->

<!--    添加车辆开始-->
    <el-dialog title="添加车辆" :visible.sync="showAddCar" width="50%" center top="0%">
      <el-form :inline="true">
        <el-form-item label="车牌号" style="width: 50%">
          <el-input v-model="insertCar.carid"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="insertCar.guige"></el-input>
        </el-form-item>
        <el-form-item label="座位数" style="width: 50%">
          <el-select v-model="insertCar.zuoweishu">
            <el-option :value="0">请选择座位数</el-option>
            <el-option :value="2">2人坐</el-option>
            <el-option :value="5">5人坐</el-option>
            <el-option :value="7">7人坐</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买日期">
          <el-date-picker
            v-model="insertCar.goumairqi"
            type="date"
            placeholder="选择日期" style="width: 50%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="原值(万元)" style="width: 50%">
          <el-select v-model="insertCar.money">
            <el-option :value="0">请选择原值区间</el-option>
            <el-option :value="10">0-10万</el-option>
            <el-option :value="20">10-20万</el-option>
            <el-option :value="30">20-30万</el-option>
            <el-option :value="40">30-40万</el-option>
            <el-option :value="50">40-50万</el-option>
            <el-option :value="100">50-100万</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="登记日期">
          <el-date-picker
            v-model="insertCar.dengjrqi"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车辆类型" style="width: 50%">
          <el-select v-model="insertCar.cartypeid">
            <el-option v-for="(item,index) in findCartype" :value="item.cartypeid" :label="item.cartypename" :key="index.cartypeid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="使用状态">
          <el-select v-model="insertCar.shiyongzhuangtaiid">
            <el-option v-for=" (item,index) in zhuangtais" :label="item.zhuangtainame" :value="item.shiyongzhuangtaiid" :key="index.shiyongzhuangtaiid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产权所属部门" style="width: 50%">
          <el-select v-model="insertCar.deptno">
            <el-option v-for=" (item,index) in deptSelect"
                       :label="item.dname"
                       :value="item.deptno"
                       :key="index.deptname"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门车辆管理员">
          <el-input v-model="insertCar.bumenchaliangguanliyuan"></el-input>
        </el-form-item>
        <el-form-item label="使用汽油标号" style="width: 50%">
          <el-input v-model="insertCar.shiyongqiyoubiaohao"></el-input>
        </el-form-item>
        <el-form-item label="最近一次大修时间">
          <el-date-picker
            v-model="insertCar.zuihouyicidaxiutime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="安全保养负责人" style="width: 50%">
          <el-input v-model="insertCar.anquanbaoyangfuzeren"></el-input>
        </el-form-item>
        <el-form-item label="下次年审时间">
          <el-date-picker
            v-model="insertCar.xiacinianshentime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="本次年审时间" style="width: 50%">
          <el-date-picker
            v-model="insertCar.bencinianshentime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="功率">
          <el-input v-model="insertCar.kw"></el-input>
        </el-form-item>
        <el-form-item label="排量"  style="width: 50%">
          <el-input v-model="insertCar.pailiang"></el-input>
        </el-form-item>
        <el-form-item label="总质量">
          <el-input v-model="insertCar.kg"></el-input>
        </el-form-item>
        <el-form-item label="养路费缴纳情况"  style="width: 50%">
          <el-input v-model="insertCar.ylfjnqk"></el-input>
        </el-form-item>
        <el-form-item label="随车资料">
          <el-input v-model="insertCar.suicheziliao"></el-input>
        </el-form-item>
        <el-form-item label="备注"  style="width: 50%">
          <el-input v-model="insertCar.beizhu"></el-input>
        </el-form-item>
        <el-form-item label="填写人">
          <el-input v-model="insertCar.tianxeiren"></el-input>
        </el-form-item>
        <el-form-item label="填写时间"  style="width: 50%">
          <el-date-picker
            v-model="insertCar.tianxeitime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button id="tianjia" @click="adCar()">添加</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--    添加车辆结束-->
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Car",
  data(){
    return{
      //查询接收数据
      carList:[],
      //修改接收数据
      updateShow:{
        carid:'',
        guige:'',
        zuoweishu:'',
        goumairqi:'',
        money:'',
        dengjrqi:'',
        cartypeid:'',
        shiyongzhuangtaiid:'',
        deptno:'',
        bumenchaliangguanliyuan:'',
        shiyongqiyoubiaohao:'',
        zuihouyicidaxiutime:'',
        anquanbaoyangfuzeren:'',
        xiacinianshentime:'',
        bencinianshentime:'',
        kw:'',
        pailiang:'',
        kg:'',
        ylfjnqk:'',
        suicheziliao:'',
        beizhu:'',
        tianxeiren:'',
        tianxeitime:''
      },
      page:1,
      pageSize:5,
      pageSizes:[5,6,10,15,20],
      total:0,
      queryForm:{
        carid:'',
        carzy:'',
        ename:'',
        shiyongzhuangtaiid:''
      },
      //状态下拉框
      zhuangtais:[],
      //车辆类型
      findCartype:[],
      //部门下拉框
      deptSelect:[],
      //添加模态窗 默认不显示
      showAddCar:false,
      //修改模态窗 默认不显示
      showAddCar2:false,
      insertCar:{
        carid:'',
        guige:'',
        zuoweishu:'',
        goumairqi:'',
        money:'',
        dengjrqi:'',
        cartypeid:'',
        shiyongzhuangtaiid:'',
        deptno:'',
        bumenchaliangguanliyuan:'',
        shiyongqiyoubiaohao:'',
        zuihouyicidaxiutime:'',
        anquanbaoyangfuzeren:'',
        xiacinianshentime:'',
        bencinianshentime:'',
        kw:'',
        pailiang:'',
        kg:'',
        ylfjnqk:'',
        suicheziliao:'',
        beizhu:'',
        tianxeiren:'',
        tianxeitime:''
      }
    }
  },
  methods:{
    carSelectAll:function (){
      this.axios({
        method:'get',
        url:'http://localhost:9001/car'
      }).then(response=>{
        console.log(response.data)
        this.carList=response.data.carData;
        this.total=response.data.carTotal;
      })
    },
    handleSizeChange:function (v){
      this.pageSize=v
    },
    handleCurrentChange:function (v){
      this.page=v
    },
    findzhuangtai:function (){
      this.axios({
        method:'get',
        url:'http://localhost:9001/syzt/selectAll'
      }).then(response=>{
        this.zhuangtais=response.data
      })
    },
    select:function (){
      this.axios({
        method:'get',
        url:'http://localhost:9001/carSelect?carid='+this.queryForm.carid+"&carzy="+this.queryForm.carzy+"&ename="+this.queryForm.ename+"&shiyongzhuangtaiid="+this.queryForm.shiyongzhuangtaiid
      }).then(response=>{
        this.carList=response.data.carData;
        this.total=response.data.carTotal
      })
    },
    addCar:function (){
      this.showAddCar=true
    },
    //添加车辆时显示车辆类型的下拉框
    showCartype:function (){
      this.axios({
          method:'get',
          url:'http://localhost:9001/cartype'
      }).then(response=>{
        this.findCartype=response.data
      })
    },
    //添加车辆时显示部门的下拉框
    showDept:function (){
      this.axios({
        method:'get',
        url:'http://localhost:9001/deptSelectAll'
      }).then(response=>{
        this.deptSelect=response.data
      })
    },
    adCar:function (){
      let carInfo={
        carid:this.insertCar.carid,
        guige:this.insertCar.guige,
        zuoweishu:this.insertCar.zuoweishu,
        goumairqi:this.insertCar.goumairqi,
        money:this.insertCar.money,
        dengjrqi:this.insertCar.dengjrqi,
        cartypeid:this.insertCar.cartypeid,
        shiyongzhuangtaiid:this.insertCar.shiyongzhuangtaiid,
        deptno:this.insertCar.deptno,
        bumenchaliangguanliyuan:this.insertCar.bumenchaliangguanliyuan,
        shiyongqiyoubiaohao:this.insertCar.shiyongqiyoubiaohao,
        zuihouyicidaxiutime:this.insertCar.zuihouyicidaxiutime,
        anquanbaoyangfuzeren:this.insertCar.anquanbaoyangfuzeren,
        xiacinianshentime:this.insertCar.xiacinianshentime,
        bencinianshentime:this.insertCar.bencinianshentime,
        kw:this.insertCar.kw,
        pailiang:this.insertCar.pailiang,
        kg:this.insertCar.kg,
        ylfjnqk:this.insertCar.ylfjnqk,
        suicheziliao:this.insertCar.suicheziliao,
        beizhu:this.insertCar.beizhu,
        tianxeiren:this.insertCar.tianxeiren,
        tianxeitime:this.insertCar.tianxeitime
      }
      this.axios.post('http://localhost:9001/car',carInfo).then(response=>{
        alert(response.data)
      })
    },
    //修改回显数据
    updateCar:function (v){
      this.showAddCar2=true;
      this.axios({
        method:'get',
        url:'http://localhost:9001/selectByCarid?carid='+v.carid
      }).then(response=>{
          this.updateShow=response.data
      })
    },
    //保存修改
    saveUpdateCar:function (){
      let updateCarInfo={
        carid:this.updateShow.carid,
        guige:this.updateShow.guige,
        zuoweishu:this.updateShow.zuoweishu,
        goumairqi:this.updateShow.goumairqi,
        money:this.updateShow.money,
        dengjrqi:this.updateShow.dengjrqi,
        cartypeid:this.updateShow.cartypeid,
        shiyongzhuangtaiid:this.updateShow.shiyongzhuangtaiid,
        deptno:this.updateShow.deptno,
        bumenchaliangguanliyuan:this.updateShow.bumenchaliangguanliyuan,
        shiyongqiyoubiaohao:this.updateShow.shiyongqiyoubiaohao,
        zuihouyicidaxiutime:this.updateShow.zuihouyicidaxiutime,
        anquanbaoyangfuzeren:this.updateShow.anquanbaoyangfuzeren,
        xiacinianshentime:this.updateShow.xiacinianshentime,
        bencinianshentime:this.updateShow.bencinianshentime,
        kw:this.updateShow.kw,
        pailiang:this.updateShow.pailiang,
        kg:this.updateShow.kg,
        ylfjnqk:this.updateShow.ylfjnqk,
        suicheziliao:this.updateShow.suicheziliao,
        beizhu:this.updateShow.beizhu,
        tianxeiren:this.updateShow.tianxeiren,
        tianxeitime:this.updateShow.tianxeitime
      }
      this.axios.put('http://localhost:9001/updateCar',updateCarInfo).then(response=>{
        alert(response.data)
      })
    },
    deleteByCarid:function (v){
      this.axios.post('http://localhost:9001/delete?carid='+v.carid).then(response=>{
        alert(response.data)
      })
    }
  },
  mounted() {
    this.carSelectAll();
    this.findzhuangtai();
    this.showCartype();
    this.showDept();
  }
}
</script>

<style scoped>
  #tianjia{
    background-color: #42b983;
    color: aliceblue;
  }
</style>
